<template>
	<view>
		<view class="top flex align-center">
			<text>商品评分</text>
			<view class="flex align-center">
				<text :class="coOne" class="lg text-gray cuIcon-favorfill" @tap="selectCo(1)"></text>
				<text :class="coTwo" class="lg text-gray cuIcon-favorfill"  @tap="selectCo(2)"></text>
				<text :class="coThree" class="lg text-gray cuIcon-favorfill"  @tap="selectCo(3)"></text>
				<text :class="coFour" class="lg text-gray cuIcon-favorfill"  @tap="selectCo(4)"></text>
				<text :class="coFive" class="lg text-gray cuIcon-favorfill"  @tap="selectCo(5)"></text>
				<!-- <block v-for="(item,index) in [1,1,1,1,1]" :key="index">
					<text :class="index<3?'color1':'color2'" class="lg text-gray cuIcon-favorfill"></text>
				</block> -->
			</view>
		</view>
		<view class="mytextarea flex">
			<image :src="img_url"></image>
			<textarea maxlength="-1" placeholder="请写下对宝贝的评价吧！" v-model="evaContent"></textarea>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="bottom flex align-center justify-center">
			<view @tap='savePostEvaGoodsInfoAdd'>发表评价</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				coOne:'color2',
				coTwo:'color2',
				coThree:'color2',
				coFour:'color2',
				coFive:'color2',
				goodsId:'',
				evaContent:'',
				imgList: [],
				imgUrlList: '',
				img_url:''
			}
		},
		onLoad(opt) {
			if(opt.key){
				this.goodsId = opt.key
			}
			if(opt.img_url){
				this.img_url = opt.img_url
			}
		},
		methods: {
			savePostEvaGoodsInfoAdd:function(){
				if(!this.evaContent){
					uni.showToast({
						title:'请输入评论内容'
					})
					return;
				}
				uni.showLoading({
					title: '上传中...'
				});
				// for(var i=0;i<this.imgList.length;i++){
				// 	this.urlToBase64(this.imgList[i])
				// }
				uni.hideLoading();
				var teColo = '3'
				if(this.coFive == 'color1'){
					teColo = '5'
				}else if(this.coFour == 'color1'){
					teColo = '4'
				}else if(this.coThree == 'color1'){
					teColo = '3'
				}else if(this.coTwo == 'color1'){
					teColo = '2'
				}else if(this.coOne == 'color1'){
					teColo = '1'
				}
				var tempData = {content:this.evaContent,
				grade_fuwu:teColo,grade_miaoshu:teColo,grade_taidu:teColo,
				img_list:this.imgUrlList
				}
				console.log(JSON.stringify(tempData)+' '+ this.goodsId) 
				api.post({
					url: 'UserOrder/PostEvaGoodsInfoAdd?order_goods_id='+this.goodsId,
					data: tempData,
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							uni.showModal({
								title: '提示',
								content: '成功',
								success() {
									uni.navigateTo({
										url:'/module/my/myOrder/myOrder'
									})
								}
							})
						}
					}
				});
			},
			ChooseImage:function() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log('ChooseImage:'+res.tempFilePaths[0])
						this.urlToBase64(res.tempFilePaths[0])
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage:function(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg:function(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			// 获取图片信息
			urlToBase64:function(url) {
				// #ifdef MP-WEIXIN
				wx.getFileSystemManager().readFile({
						filePath: url, //选择图片返回的相对路径
						encoding: 'base64', //编码格式
						success: res => {
							//成功的回调
							uni.showLoading({
										title: '上传中...'
									});
							this.upLoadPic(res.data)
						},
						complete:e=>{
							console.log('urlToBase64:'+JSON.stringify(e))
						}
					});
			   // #endif
				
				// uni.request({
				// 	url: url,
				// 	method: 'GET',
				// 	responseType: 'arraybuffer',
				// 	success: res => {
				// 		uni.showLoading({
				// 			title: '上传中...'
				// 		});
				// 		let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				// 		this.upLoadPic(base64)
						
				// 	},
				// 	complete(e) {
				// 		console.log('urlToBase64:'+JSON.stringify(e))
				// 	}
				// });
			},
			upLoadPic:function(item){
				api.post({
					url: 'User/UploadImage',
					data: {
						image:item
					},
					success: data => {
						uni.hideLoading();
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.imgUrlList +='https://api.jiangyikou.neetao.cn'+data.Response.imgurl+','
							// this.imgUrlList.concat([{img_url:data.Response.imgurl}])
						}
					}
				});	
			},
			selectCo(e){
				if(e==1){
					if(this.coOne ==  'color1'){
					if(this.coFive != 'color1' && this.coFour != 'color1' && this.coThree != 'color1' &&this.coTwo != 'color1' ){	
					 this.coOne = 'color2'	}
					}else{
						this.coOne = 'color1'	
					}
				}else if(e ==2){
					if(this.coTwo ==  'color1'){
					if(this.coFive != 'color1' && this.coFour != 'color1' && this.coThree != 'color1' ){	
					 this.coTwo = 'color2'	}
					}else{
						this.coOne = 'color1'
						this.coTwo = 'color1'	
					}
				}else if(e ==3){
					if(this.coThree ==  'color1'){
						if(this.coFive != 'color1' && this.coFour != 'color1' ){
					 this.coThree = 'color2'	}
					}else{
						this.coOne = 'color1'
						this.coTwo = 'color1'
						this.coThree = 'color1'	
					}
				}else if(e ==4){
					if(this.coFour ==  'color1'){
						if(this.coFive != 'color1'){
						 this.coFour = 'color2'		
						}
					 
					}else{
						this.coOne = 'color1'
						this.coTwo = 'color1'
						this.coThree = 'color1'
						this.coFour = 'color1'	
					}
				}else if(e ==5){
					if(this.coFive ==  'color1'){
					 this.coFive = 'color2'	
					}else{
						this.coOne = 'color1'
						this.coTwo = 'color1'
						this.coThree = 'color1'
						this.coFour = 'color1'	
						this.coFive = 'color1'	
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mytextarea textarea{
		padding-left: 20upx;
		box-sizing: border-box;
		font-size: 26upx;
		height: 220upx;
	}
	.mytextarea{
		padding: 20upx;
		box-sizing: border-box;
	}
	.mytextarea image{
		width: 133upx;
			height: 100upx;
	}
	.top{
		padding: 0 20upx;
		height: 84upx;
		border-bottom: 1upx solid #ddd;
	}
	.top> text{
		margin-right: 60upx;
		font-size: 30upx;
			color: #333333;
	}
	.bottom{
		width: 100%;
			height: 100upx;
			background-color: #ffffff;
			border: solid 1upx #dddddd;
			position: fixed;
			bottom: 0;
	}
	.bottom> view{
		width: 361upx;
			height: 69upx;
			background-color: $btn-bground;
			border-radius: 34upx;
			border: solid 1upx $btn-bground;
			text-align: center;
			line-height: 69upx;
			color: #fff;
			font-size: 28upx;
	}
	page{
		background-color: #fff;
	}
	.top view>text{
		margin-left: 10upx;
	}
	.color1{
		color: #ff6c00;
	}
	.color2{
		color: #bababa;
	}
</style>
